<template>
  <div class="login-container">
    <el-tabs v-model="activeName" type="border-card" class="login-tabs" stretch>
      <el-tab-pane label="用户注册" name="login">
        <el-form
          ref="loginForm"
          :model="user"
          status-icon
          :rules="rules"
          class="login-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="surepassword">
            <el-input type="password" v-model="user.surepassword"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input type="text" v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')"
              >注册</el-button
            ><br>
            <a href="http://localhost:8080/#/register">忘记密码？</a>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import api from "../../api";
import jwt from "jwt-decode";
import { mapMutations } from "vuex";

export default {
  name: "Register",
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      }
      if (value.length < 2) {
        callback(new Error("长度不够"));
      }
      callback();
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    var validateSurePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      }
      callback();
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      }
      callback();
    };
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      }
      callback();
    };
    return {
      activeName: "login",
      user: {
        username: "",
        password: "",
        surepassword: "",
        phone: "",
        email: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        surepassword: [{ validator: validateSurePassword, trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapMutations("loginModule", ["setUser"]),
    // 注册按钮
    submitForm() {
      if (this.activeName === "login") {
        // 注册
        console.log(this.user.username, this.user.password);
      }
      api.getRegister({
          pname: this.user.username,
          ppwd: this.user.password,
          pphone: this.user.phone,
          pmail: this.user.email,
        })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data);
            alert("注册成功")
            this.$router.push({
              path:"/layoutback"
            });
          }
        })
      .catch((error) => {
        this.$message({
          message: error.data.errors,
          type: "error",
        });
      });
    },
  },
  mounted() {

  },
};
</script>

<style scoped lang="less">
.login-container {
  width: 500px;
  margin: 0 auto;
  margin-top: 100px;
  .login-form {
    padding: 40px 40px;
  }
  h3 {
    margin-top: 20px;
  }
  .login-tabs {
    border-radius: 5px;
  }
}
</style>